<template>
  <div>
    <!--<input type="button" value="显示弹窗" @click="visible = true">-->
    <div class="mask" style="opacity:0.2;" v-if="visible">
    </div>
    <div class="alert" v-if="visible">
      <p class="header" style="font-size:0.85rem;margin:0 0 0 0;margin-top:1.3rem;" >{{title}}</p>
      <p class="message" style="font-size:0.8rem;color: #333;margin:0; padding:0.45rem 0.75rem 1.3rem 0.75rem; line-height:1.2rem">{{num}}{{message}}</p>
      <div class="btn-group "v-show="btn" :class="{'col-1':!showCancelButton,'col-2':showCancelButton}">
        <button class="btn secondary"  v-show="cancelButtonShow" @click="handleActions('cancel')">{{cancelButtonText}}</button>
        <button class="btn secondary" v-bind:style="{width: btnwidth}" @click="handleActions('confirm')">{{confirmButtonText}}</button>
      </div>
    </div>
  </div>
</template>
<script>
	export default{
		name:'Alert',
		props:{},
		ready(){},
		methods:{
			handleActions(action){
				var callback = this.callback;
        		//this.visible = false;
        		callback(action);
			}
		},
    props: {
        title:{
          default: "标题"
        },
				message:{
          default: "内容"
        },
				cancelButtonText:{
          default: "取消"
        } ,
				confirmButtonText:{
          default: "确认"
        },
				showCancelButton: {
          type: Boolean,
          default:true
        },
				btn: {
          type: Boolean,
          default:true
        },
				btnwidth: {
          default:"50%"
        },
				cancelButtonShow:{
          type: Boolean,
          default:true
        },
				num:{
          default:""
        },
				duration:{
          default:""
        },
        activeColor: {
          default:"#333"
        },
				callback:{
          default:null
        },
        visible:{
          type: Boolean,
          default:false
        }
        }

	}
</script>
